<!doctype html>
<html lang="en">
	<head>
		<!--声明当前页面的编码集GBK,GB2312(中文编码)，UTF-8(国际编码)-->
		<meta charset="UTF-8" />
		
		<!--声明网页三要素-->
		<title>前端开发</title>
		<meta name="Keywords" content="潭州追梦"/>
		<meta name="Description" content=""/>
		<link rel="stylesheet" href="css/reset.css" />
		<!--CSS层叠样式表(让网页变得漂亮，网页设计师)-->
		<style type="text/css" id="css">
			body{
				background:black;
			}
			#List{
				width:800px;
				height:360px;
				box-shadow:0 0 10px white;
				margin:150px auto 0;
				perspective:1500px;/* 站 在1000px之处看li	 */
			}
			#List li{
				width:40px;
				height:360px;
				float:left;
				position:relative;
				opacity:1;
				transform-style:preserve-3D;/* 	3D空间 */
				transform-origin:center center -180px;
			}
			#List li a,#List li span{
				position:absolute;
				width:100%;
				height:100%;
			}
			#List li span{
				width:360px;
				position:absolute;
				height:100%;
			}
			#List li a:nth-child(1){
				left:0;
				top:0;
				background:url("img/1.png");
			}
			#List li a:nth-child(2){
				left:0;
				top:-100%;
				background:url("img/2.png");
				transform-origin:bottom;
				transform:rotateX(90deg);
			}
			#List li a:nth-child(3){
				left:0;
				top:0;
				background:url("img/3.jpg");
				transform:translateZ(-360px) rotateX(180deg);
			}
			#List li a:nth-child(4){
				left:0;
				top:100%;
				background:url("img/4.jpg");
				transform-origin:top;
				transform:rotateX(-90deg);
			}
			#List:hover li{
				transform:rotateX(360deg);
			}
			#btns{
				width:200px;
				margin:80px auto;
			}
			#btns li{
				width:40px;
				height:40px;
				background:red;
				color:white;
				float:left;
				text-align:center;
				line-height:40px;
				font-style:italic;
				border-radius:50%;
				margin:0 5px;
				font-weight:bold;
				cursor:pointer;
			}
			#btns li.active{
				background:purple;
				color:black;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var oList = document.getElementById("List");
				var oCSS = document.getElementById("css");
				var oBtn = document.getElementById("btns").children;
				var iW = 40;
				var shtml="";
				var scss="";
				var Lilength = oList.clientWidth / iW;
				var iZindex= 0;
				var iNow = 0;
				var aLi;
				var aLi = oList.children;
				for (var i=0;i<Lilength;i++ )
				{
					i>Lilength/2?iZindex--:iZindex++;
					shtml+='<li><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></li>';
					scss += "#List li:nth-child("+(i+1)+") a{background-position:-"+(iW*i)+"px 0}";
					scss += "#List li:nth-child("+(i+1)+"){z-index:"+iZindex+"}";
				}
				oList.innerHTML = shtml;
				oCSS.innerHTML += scss;
				for (var i=0;i<oBtn.length;i++ )
				{
					oBtn[i].index = i;
					oBtn[i].onclick = function(){
						oBtn[iNow].className = "";
						for (var i=0;i<aLi.length;i++ )
						{
							aLi[i].style.transition = "0.8s "+i*50+"ms";
							aLi[i].style.WebkitTransform="rotateX(-"+(this.index)*90+"deg)";
						}
						
						iNow = this.index;
						oBtn[iNow].className = "active";
					}
				}
			}
		</script>
	</head>
	<body>
		<ul id="List">
			
		</ul>
		<ol id="btns" class="clearfix">
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ol>
	</body>
</html>
